<template>
  <div class="chat-bot"  @mousedown="startDrag">
    <el-tooltip effect="dark" content="AI问答助手" placement="left">
    <svg-icon icon-class="jiqirenlarge" class="ai-icon"  @click="gotoChat" />
    <!-- <svg-icon icon-class="newAiIcon" class="ai-icon"  @click="dialog = !dialog" /> -->
    </el-tooltip>
    <!-- <el-drawer
      title="AI问答助手"
      :visible.sync="dialog"
      direction="rtl"
      :before-close="handleClose"
      append-to-body
      :custom-class="smallWindow ? 'small-screen' : 'full-screen'"
    >
      <template #title>
        <span>AI问答助手</span>
        <svg-icon
          style="cursor: pointer;"
          :icon-class="!smallWindow ? 'newSmallscreen' : 'newFullscreen'"
          @click="handleFullScreen"
        />
      </template>
      <div>
        <Assistant :smallWindow="smallWindow" />
      </div>
    </el-drawer> -->
  </div>
</template>

<script>
import Assistant from "@/components/ai/Assistant";
import {throttle} from '@/utils/index'
export default {
  name: "ChatAssistant",
  components: {
    Assistant,
  },
  data() {
    return {
      dialog: false,
      smallWindow: true,
      isDragging: false,
      initialX: 0,
      initialY: 0,
      offsetX: 0,
      offsetY: 0,
    };
  },
  mounted() {
    this.$el.addEventListener('mousedown', this.startDrag);
  },
  beforeDestroy() {
    this.$el.removeEventListener('mousedown', this.startDrag);
  },
  methods: {
    gotoChat() {
      this.$router.push({ name: "chat" });
      // const chatRoute = this.$router.resolve({ name: "chat" });
      // window.open(chatRoute.href, '_blank');
    },
    startDrag(e) {
      this.isDragging = true;
      this.initialX = e.clientX - this.offsetX;
      this.initialY = e.clientY - this.offsetY;
      document.addEventListener('mousemove', this.throttledOnDrag);
      document.addEventListener('mouseup', this.stopDrag);
      this.$el.classList.add('dragging');
    },
    onDrag(e) {
      if (this.isDragging) {
        this.offsetX = e.clientX - this.initialX;
        this.offsetY = e.clientY - this.initialY;
        this.$el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px)`;
      }
    },
    throttledOnDrag: throttle(function(e) {
      this.onDrag(e);
    }, 16), // 16ms ≈ 60fps
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.throttledOnDrag);
      document.removeEventListener('mouseup', this.stopDrag);
      this.$el.classList.remove('dragging');
    },
  //   handleClose() {
  //     this.dialog = false;
  //     this.smallWindow = true;
  //   },
  //   handleFullScreen() {
  //     this.smallWindow = !this.smallWindow;
  //   },
  },
};
</script>

<style scoped lang="scss">
.chat-bot {
  will-change: transform;
  position: fixed;
  transition: all 0.3sease;
  bottom: 100px;
  right: 5px;
  z-index: 999;
  // padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s;
  cursor: pointer;
  width: 50px;
  height: 50px;
  &:hover{
    width: 60px;
  height: 60px;
  }
  &:focus-visible{
    outline: none;
  }
.ai-icon{
  height: 100%;
  width: 100%;
}
.chat-bot.dragging {
  cursor: grabbing;
}
  .messsage-area {
    flex: 1;
    height: 100%;
  }

  .input-area {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 1rem;
    align-items: center;
  }
}
</style>
<style  lang="scss">
.small-screen {
  &.el-drawer.rtl {
    height: 500px;
    width: 450px !important;
    top: auto;
    background: #FFFFFF;
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
border-radius: 8px 8px 8px 8px;
  }
  .el-drawer__body {
    .an-qu {
      height: calc(100vh - 250px);
      .chat-detail-scroll-container {
        .chat-detail-content {
          .chat-detail-main {
            min-height: calc(100vh - 250px);
            height: calc(100vh - 250px);
          }
        }
        .placeholder-container {
          .additional-element {
            height: calc(100vh - 320px) !important;
            padding: 0 20px;
          }
        }
      }
    }
  }
}
.el-drawer__header {
  margin-bottom: 10px;
  padding: 10px;
  padding-bottom: 0;
  font-size: 15px;
color: #131E28;
line-height: 18px;
}
.full-screen {
  &.el-drawer.rtl {
    height: 100%;
    width: 100% !important;
    top: 0;
  }
  .el-drawer__body {
    .an-qu {
      height: calc(100vh - 45px);
      .sider-container{
        height: calc(100vh - 150px)!important;
      }
      .chat-detail-scroll-container {
        .chat-detail-content {
          // overflow: auto;
          .chat-detail-main {
            min-height: calc(100vh);
            // height: calc(100vh - 45px);
            height: 100%;
          }
        }
        .placeholder-container {
          .additional-element {
            height: calc(100vh - 115px) !important;
          }
        }
      }
    }
  }
}
</style>